import { Mic, AlertCircle, Loader } from 'lucide-react';
import type { VideoGenerateRequest } from '../../types/video';
import type { Avatar } from '../../types/avatar';
import type { Voice } from '../../services/previewService';

interface VoiceTabProps {
  formData: VideoGenerateRequest;
  selectedAvatar: Avatar | null;
  voices: Voice[];
  loadingVoices: boolean;
  onChange: (data: Partial<VideoGenerateRequest>) => void;
}

export default function VoiceTab({
  formData,
  selectedAvatar,
  voices,
  loadingVoices,
  onChange,
}: VoiceTabProps) {
  return (
    <div className="space-y-6">
      <div>
        <label className="block text-sm font-semibold text-gray-800 mb-2">选择语音</label>
        {loadingVoices ? (
          <div className="flex items-center justify-center p-8">
            <Loader className="w-6 h-6 animate-spin text-blue-600" />
            <span className="ml-2 text-gray-600">加载语音列表...</span>
          </div>
        ) : (
          <div className="space-y-2 max-h-96 overflow-y-auto">
            {voices.map(voice => (
              <label
                key={voice.voice_id}
                className="flex items-center gap-3 p-3 border rounded-lg hover:border-blue-300 cursor-pointer"
              >
                <input
                  type="radio"
                  name="voice"
                  value={voice.voice_id}
                  checked={formData.voice_id === voice.voice_id}
                  onChange={e => onChange({ voice_id: e.target.value })}
                  className="text-blue-600"
                />
                <div className="flex-1">
                  <p className="font-semibold text-sm text-gray-900">{voice.name}</p>
                  <p className="text-xs text-gray-700">
                    {voice.gender} • {voice.language} • {voice.language_code}
                    {selectedAvatar?.default_voice_id === voice.voice_id && (
                      <span className="ml-2 text-green-600 font-medium">• Avatar默认</span>
                    )}
                  </p>
                </div>
                <div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
                  <Mic className="w-4 h-4 text-blue-600" />
                </div>
              </label>
            ))}
            {voices.length === 0 && (
              <div className="text-center py-8 text-gray-500">暂无可用语音</div>
            )}
          </div>
        )}
      </div>

      <div className="p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
        <div className="flex items-start gap-3">
          <AlertCircle className="w-5 h-5 text-yellow-600 flex-shrink-0 mt-0.5" />
          <div>
            <p className="text-sm font-semibold text-yellow-900">语音提示</p>
            <p className="text-sm text-yellow-800 mt-1">
              {selectedAvatar?.default_voice_id
                ? `当前Avatar有默认语音，已自动选择。您可以手动更改为其他语音。`
                : `如果不选择语音，系统将使用默认语音。建议根据脚本语言选择对应的语音类型以获得最佳效果。`}
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}
